<script lang="ts" setup>
import { UiDataView } from '../../utils'
import { Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { PageFetchAction, DataViewRef, TableColumnConfig } from '../../utils/types'

const tableRef: DataViewRef = ref()

const columns = [
  { type: 'selection', width: 50 },
  { label: '用户', prop: 'username' },
  { label: '登录时间', prop: 'logintime' },
  { label: '是否成功', render: (h, { row }) => '成功' },
  { label: 'IP', prop: 'ip' }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        total: 2,
        data: [{ username: 'test' }, { ip: '168.12.3.4' }]
      })
    }, 500)
  })
}

const onDelete = (rows: any[]) => {
  tableRef.value.deleteRows(() => {
    console.log(rows)
  })
}

onMounted(() => {
  tableRef.value.getData()
})
</script>

<template>
  <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction">
    <template #search="{ form, onSearch }">
      <ElFormItem label="用户ID">
        <ElInput v-model="form.userId" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="日志库">
        <ElSelect clearable></ElSelect>
      </ElFormItem>
      <ElFormItem label="时间选择">
        <ElDatePicker
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          v-model="form.timerange" />
      </ElFormItem>
    </template>
    <template #actions="{ selectedRows }">
      <ElButton
        type="danger"
        :icon="Delete"
        :disabled="selectedRows.length < 1"
        @click="onDelete(selectedRows)">删除</ElButton>
    </template>
  </UiDataView>
</template>
